<template>
<div id="viplevelinfo">
  <div class="leveldetail">
    <div class="userlevel">
      <img class="headimg" :src="userinfo.head_img_url">
      <span class="afterspan"><img :src="levelinfo.levelimg" alt=""></span>
    </div>
    <p>{{userinfo.nick_name}}</p>
    <span><img src="../../assets/images/club.png" style="height:.8rem;margin-top:-0.12rem;vertical-align: middle;"> {{userinfo.timeDistance}}<img src="../../assets/images/tian.png" style="height:.8rem;margin-top:-0.12rem;vertical-align: middle;"></span>
  </div>
  <div class="level" v-if="parseInt(userinfo.vip) !== 6">
    <div class="lv_before"><img :src="leftimg"></div>
    <div class="levelexp">
      <div class="levelbeforetxt">{{beforetxt}}</div>
      <div class="levelli" :style="{ width: levelexp + '%'}"></div>
      <div class="levelaftertxt">{{aftertxt}}</div>
    </div>
    <div class="lv_after"><img :src="nextimg"></div>
  </div>
  <div class="level" v-if="parseInt(userinfo.vip) === 6">
    <div class="lv_before"><img :src="nextimg"></div>
    <p style="line-height:32px;"><span>{{aftertxt}}</span><span style="color:#999; font-size:.8rem;">（已达到最高等级）</span></p>
  </div>
</div>
</template>

<script>
import { Flow, FlowState, FlowLine } from 'vux'

export default {
  name: 'viplevelinfo',
  components: {
    Flow,
    FlowState,
    FlowLine
  },
  data () {
    return {
      levelexp: 0,
      beforetxt: '',
      aftertxt: '',
      leftimg: '',
      nextimg: '',
      levelinfo: '',
      userinfo: {}
    }
  },
  created () {
    // 获取等级
    this.$axios.post(this.apidomain + '/api/cust/queryCustBonus/' + this.getCookie('appid'), {
      wxOpenId: this.getCookie('openid')
    })
    .then((response) => {
      this.userinfo = response.data.data
      this.getObjDetail('./static/json/level/vipinfo.json').then((data) => {
        this.levelinfo = data.levelthemes[parseInt(this.userinfo.vip) - 1]
        if (parseInt(response.data.data.vip) === 6) {
          this.beforetxt = data.levelthemes[parseInt(this.userinfo.vip) - 2].levelname
          this.aftertxt = data.levelthemes[parseInt(this.userinfo.vip) - 1].levelname
          this.leftimg = './static/images/userlevel-icon(' + (parseInt(response.data.data.vip) - 1) + ').png'
          this.nextimg = './static/images/userlevel-icon(' + parseInt(response.data.data.vip) + ').png'
          this.levelexp = 100
        } else {
          this.beforetxt = parseInt(this.userinfo.vip) - 1 > -1 ? data.levelthemes[parseInt(this.userinfo.vip) - 1].levelname : '-'
          this.aftertxt = data.levelthemes[parseInt(this.userinfo.vip)].levelname
          this.leftimg = parseInt(response.data.data.vip) > -1 ? './static/images/userlevel-icon(' + parseInt(response.data.data.vip) + ').png' : ''
          this.nextimg = parseInt(response.data.data.vip) > -1 ? './static/images/userlevel-icon(' + (parseInt(response.data.data.vip) + 1) + ').png' : ''
          this.levelexp = parseInt((response.data.data.payAmount - data.levelthemes[parseInt(this.userinfo.vip) - 1].levelscore) * 100 / (data.levelthemes[parseInt(this.userinfo.vip)].levelscore - data.levelthemes[parseInt(this.userinfo.vip) - 1].levelscore))
        }
      }, () => {})
    })
    .catch((error) => {
      console.log(error)
    })
  },
  methods: {
  },
  computed: {
  }
}
</script>

<style lang="less">
@import '../../assets/less/userlevel/viplist.less';
</style>
